<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>Mr Hotels - 客户登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- CSS -->
    <link rel="stylesheet" href="../../../css/web_page/reset.css" th:href="@{/css/web_page/reset.css}">
    <link rel="stylesheet" href="../../../css/web_page/supersized.css" th:href="@{/css/web_page/supersized.css}">
    <link rel="stylesheet" href="../../../css/web_page/login_style.css" th:href="@{/css/web_page/login_style.css}">
    <script th:src="@{/lib/layui/layui.js}"></script>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
        .backIndex {
            font-size: 30px;
            font-weight: 700;
            text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
            text-decoration: none;
            color: #FFF;
        }
    </style>
</head>

<body oncontextmenu="return false">

<div class="page-container">
    <div style="text-align: center;"><a href="javascript:;" th:href="@{initPage}" class="backIndex">Mr Hotels</a></div>
    <input type="hidden" th:value="${type}" id="type">
    <!--登陆表单-->
    <form action="webLoginVerify" method="post" id="loginForm" th:if="${type == 'login'}">
        <div>
            <div>
                <input type="text" name="username" class="username" placeholder="请输入邮箱或手机号" autocomplete="off"
                       th:value="${session.username}"/>
            </div>
            <div>
                <input type="password" name="password" class="password" placeholder="请输入密码" oncontextmenu="return false"
                       onpaste="return false"/>
            </div>
        </div>
        <input type="hidden" id="hiddenMsg" th:value="${session.msg}"/>
        <script th:if="${session.msg != null}">
            layui.use('layer', function () {
                var layer = layui.layer, $ = layui.jquery;

                var msg = $("#hiddenMsg").val();

                layer.tips(msg, '.password', {
                    tips: [2, '#F00']
                });
            })
        </script>
        <button id="submitBtn" type="button">登录</button>
        <button id="skipRegistry" type="button">还没有账号？快速注册</button>
        <button class="find_password" type="button">忘记密码？</button>
    </form>

    <!--注册表单-->
    <form action="" method="post" id="registryForm" th:if="${type == 'registry'}">
        <input type="hidden" name="sessionRandom"/>
        <div>
            <div>
                <input type="text" name="loginName" class="loginName" placeholder="请输入邮箱或手机号，推荐邮箱"/>
            </div>
            <div>
                <input type="text" name="name" class="name" placeholder="请输入真实姓名"/>
            </div>
            <div>
                <input type="password" name="password" class="password" placeholder="请输入密码"/>
            </div>
            <div>
                <input type="password" name="rePassword" class="rePassword" placeholder="再次输入密码"/>
            </div>

            <div>
                <input type="text" name="random" class="random" placeholder="请输入验证码" style="width: 165px;"/>
                <button type="button" id="getRandom" style="display: inline-block;width: 100px;">发送验证码</button>
            </div>
        </div>
        <button id="registry" type="button">注册</button>
        <button id="skipLogin" type="button">已有账号？快速登录</button>
        <button class="find_password" type="button">忘记密码？</button>
    </form>
    <div class="connect">
        <p style="text-align: center;color: #FFF;">If we can only encounter each other rather than stay with each
            other,then I wish we had never
            encountered.</p>
        <p style="margin-top:20px;text-align: center;color: #FFF;">如果只是遇见，不能停留，不如不遇见。</p>
    </div>
</div>
<div class="alert" style="display:none">
    <h2>消息</h2>
    <div class="alert_con">
        <p id="ts"></p>
        <p style="line-height:70px"><a class="btn">确定</a></p>
    </div>
</div>

<!-- Javascript -->
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="../../../js/web_page/supersized.3.2.7.min.js" th:src="@{/js/web_page/supersized.3.2.7.min.js}"></script>
<script src="../../../js/web_page/supersized-init.js" th:src="@{/js/web_page/supersized-init.js}"></script>
<script>
    layui.use('layer', function () {
            var layer = layui.layer, $ = layui.jquery;

            /**
             * 切换到注册页
             */
            $("#skipRegistry").click(function () {
                window.location.href = 'webRegistry';
            });

            /**
             * 切换到登录页
             */
            $("#skipLogin").click(function () {
                window.location.href = 'webLogin';
            });

            /**
             * 忘记密码
             */
            $(".find_password").click(function () {
                window.location.href = "findPassword";
            });

            /**
             * 登录按钮绑定单击事件
             */
            $("#submitBtn").click(function () {
                loginMethod();
            });

            /**
             * 登录方法
             */
            function loginMethod() {
                var u = $("input[name=username]");  //输入的用户名
                var p = $("input[name=password]");  //输入的密码
                //手机号正则
                var phoneReg = /^1[3456789]\d{9}$/;
                //邮箱正则
                var emailReg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                //验证用户名
                if (u.val() == '') {
                    layer.tips('请填写登录邮箱或手机号！！', '.username', {
                        tips: [2, '#F00']
                    });
                    return false;
                } else if (!(emailReg.test(u.val()) || phoneReg.test(u.val()))) {
                    layer.tips('输入的邮箱或手机号格式有误！！', '.username', {
                        tips: [2, '#F00']
                    });
                    return false;
                }
                //验证密码
                if (p.val() == '') {
                    layer.tips('请填写登录密码！！', '.password', {
                        tips: [2, '#F00']
                    });
                    return false;
                }
                //判断输入的是邮箱还是手机号
                if (emailReg.test(u.val())) {
                    $("input[name='username']").attr("name", "email");
                } else {
                    $("input[name='username']").attr("name", "phone");
                }
                //表单提交
                $("#loginForm").submit();
            }

            /**
             * 注册方法
             */
            function registryMethod() {
                //获取数据
                var name = $("input[name='name']").val();
                var password = $("input[name='password']").val();
                var rePassword = $("input[name='rePassword']").val();
                var random = $("input[name='random']").val();
                var email = $("input[name='loginName']").val();
                //非空验证和密码验证
                if (name.trim().length == 0) {
                    layer.tips('请填写姓名！！', '.name', {
                        tips: [2, '#F00']
                    });
                    return;
                }
                if (password.trim().length == 0) {
                    layer.tips('请填写密码！！', '.password', {
                        tips: [2, '#F00']
                    });
                    return;
                }
                if (!(/^[\w_-]{6,16}$/.test(password))) {
                    layer.tips('密码格式有误！最少6位且包含字母！', '.password', {
                        tips: [2, '#F00']
                    });
                    return;
                }
                if (password != rePassword) {
                    layer.tips('两次密码不一致！！', '.rePassword', {
                        tips: [2, '#F00']
                    });
                    return;
                }
                if (random.trim().length == 0) {
                    layer.tips('请获取并输入验证码！！', '.random', {
                        tips: [4, '#F00']
                    });
                    return;
                }
                //进行判断，判断验证码输入是否正确，判断该邮箱是否已注册
                $.getJSON(
                    'verifyRandom?random=' + random + "&email=" + email,
                    function (randomData) {
                        //验证码通过
                        if (randomData.result == "success") {
                            //修改字段名
                            $("input[name='loginName']").attr("name", "email");
                            //执行注册
                            $.getJSON(
                                'addClientInfo?sendData=' + $("#registryForm").serialize(),
                                function (registryData) {
                                    if (registryData.result == "success") {
                                        layer.confirm('恭喜您注册成功！', {
                                            title: '消息提示',
                                            icon: 6,
                                            btn: ['确定']
                                        }, function () {
                                            window.location.href = "webLogin";
                                        })
                                    } else {
                                        layer.open({
                                            title: '错误提示',
                                            content: registryData.msg,
                                            anim: 6,
                                            icon: 5
                                        })
                                    }
                                }
                            )
                        } else if (randomData.result == "error") {
                            layer.tips(randomData.msg, '.random', {
                                tips: [4, '#F00']
                            });
                            return;
                        } else {
                            layer.tips(randomData.msg, '.loginName', {
                                tips: [2, '#F00']
                            });
                            return;
                        }
                    }
                )
            }

            /**
             * 注册按钮单击事件
             */
            $("#registry").click(function () {
                registryMethod();
            });

            /**
             * 单击发送验证码
             */
            $("#getRandom").click(function () {
                sendRandomMethod()
            });

            /**
             * 发送验证码方法
             */
            function sendRandomMethod() {
                var loginName = $("input[name='loginName']");
                //手机号正则
                var phoneReg = /^1[3456789]\d{9}$/;
                //邮箱正则
                var emailReg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                //验证用户名
                if (loginName.val() == '') {
                    layer.tips('请填写登录邮箱或手机号！！', '.loginName', {
                        tips: [2, '#F00']
                    });
                    return false;
                } else if (!(emailReg.test(loginName.val()) || phoneReg.test(loginName.val()))) {
                    layer.tips('输入的邮箱或手机号格式有误！！', '.loginName', {
                        tips: [2, '#F00']
                    });
                    return false;
                }
                //判断输入的是邮箱还是手机号
                if (emailReg.test(loginName.val())) {
                    settime();
                    //异步发送验证码
                    $.post(
                        "registryEmailSend?email=" + loginName.val(),
                        function (data) {
                            if (data.result == "success") {

                            } else {
                                layer.tips('邮件发送失败！请稍后再试！', '#getRandom', {
                                    tips: [2, '#F00']
                                });
                            }
                        }
                    );
                } else {
                    //手机号目前不支持
                    layer.confirm('暂不支持手机号注册，请使用邮箱！', {
                        title: '温馨提示',
                        icon: 5,
                        anim: 6,
                        btn: ['确定']
                    });
                    return;
                }
            }

            /**
             * 按下回车绑定登录按钮或注册按钮事件
             */
            $(document).keydown(function (e) {
                if (e.keyCode == 13) {
                    //判断本次是登录还是注册
                    if ($("#type").val() == 'login') {
                        loginMethod();
                    } else {
                        registryMethod();
                    }
                }

            });

            //设置倒计时时间
            var countdown = 60;
            //获取按钮
            var _generate_code = $("#getRandom");

            function settime() {
                if (countdown == 0) {
                    _generate_code.bind("click", function () {
                        sendRandomMethod();
                    });
                    _generate_code.text("获取验证码");
                    countdown = 60;
                    return false;
                } else {
                    _generate_code.unbind("click");
                    _generate_code.text("重新发送(" + countdown + ")");
                    countdown--;
                }
                setTimeout(function () {
                    settime();
                }, 1000);
            }

        }
    );

</script>
<script>
    window.onload = function () {
        $(".connect p").eq(0).animate({"left": "0%"}, 600);
        $(".connect p").eq(1).animate({"left": "0%"}, 400);
    };
</script>
</body>

</html>

